<script setup lang="ts">
defineOptions({
  name: "bordCharts"
});
import { ref, onMounted, onUnmounted, computed, markRaw, nextTick } from "vue";
import echartsCom from "@/views/common/components/echartsCom/index.vue";
import modelTitle from "@/views/common/components/modelTitle/index.vue";
import { emitter } from "@/utils/mitt";
import type { LabelLayoutFunctionType, EchartsInstanceFunctionType } from "@/views/common/components/types";

interface Props {
  /**  获取当前echarts实例对象，参数为实例对象和回调函数 */
  getEchartsInstance?: EchartsInstanceFunctionType | null;
  /**  获取 optiins 配置函数 */
  labelLayoutFn?: LabelLayoutFunctionType | null;
  /**  同 echarts option */
  options?: CommonEcharts.CommonEchartsOption | null;
  /**  有 title 时传入 */
  title?: string;
  /**  有按钮时传入，传入后会有 btn-click 事件 */
  button?: string;
  /**  title 栏右侧文字 */
  rightText?: string | number;
  /**  模块最低宽度，默认 330px */
  width?: number;
  /**  模块最低高度，默认 200px */
  height?: number;
  /**  是否需要背景阴影，默认为true */
  boxShadow?: boolean;
  /**  是否需要圆角，默认为true */
  borderRidus?: boolean;
  /**  请求数据数据 */
  requestData?: any | null;
  /**  表格数据 */
  dataList?: any[];
  /**  表格列 */
  tableColumns?: any[];
}

const props = withDefaults(defineProps<Props>(), {
  width: 330,
  height: 200,
  boxShadow: true,
  borderRidus: true
});

interface Emits {
  /**  title 右侧按钮点击后触发 */
  (event: "btn-click"): void;
}

const emits = defineEmits<Emits>();

const echartsKey = ref<string>(Math.random().toString(36).slice(2, 10));
const echartsComRef = ref<InstanceType<typeof echartsCom> | null>(null);

const title_height = computed(() => (props.title ? "32px" : "0px"));
const min_width = computed(() => `${props.width}px`);
const min_height = computed(() => `${props.height}px`);

const clickHandler = () => emits("btn-click");

const updateEchartsKey = () => {
  emitter.on("viceMenuChange", () => {
    echartsKey.value = Math.random().toString(36).slice(2, 10);
  });
};

const getEcharts = async () => {
  await nextTick();
  return echartsComRef.value.getEcharts();
};

onMounted(async () => {
  updateEchartsKey();
});

defineExpose({
  getEcharts
});
</script>

<template>
  <div class="echarts-chart" :class="{ boxShadow, borderRidus }">
    <modelTitle v-if="title" :title="title">
      <div class="model-title-slot">
        <span v-if="rightText" class="right-text">{{ rightText }}</span>
        <px-button v-if="button" type="primary" size="small" plain @click="clickHandler">{{ button }}</px-button>
      </div>
    </modelTitle>
    <div class="model-con">
      <div class="echarts-chart-com">
        <echartsCom
          ref="echartsComRef"
          :key="echartsKey"
          :getEchartsInstance="getEchartsInstance"
          :labelLayoutFn="labelLayoutFn"
          :options="options"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
$colorDone: #00b36d;
$colorTotal: var(--px-color-primary);

.echarts-chart {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  width: 100%;
  min-width: v-bind(min_width);
  height: 100%;
  min-height: v-bind(min_height);
  padding: 16px;
  background-color: #fff;

  .model-title-slot {
    display: flex;
    gap: 16px;
    align-items: center;

    .right-text {
      font-weight: 600;
      line-height: 1;
      color: var(--px-color-primary);
    }
  }

  .model-con {
    display: table;
    width: 100%;
    height: 290px;

    .model-con-left {
      display: table-cell;

      .model-con-data {
        display: flex;
        justify-content: space-between;
        margin-top: 35px;

        .model-data-con {
          display: flex;
          flex-flow: row nowrap;
          gap: 12px;
          align-items: center;
          justify-content: space-between;
          width: 60%;
          border-right: 1px solid #ebebeb;

          .content-item {
            display: flex;
            flex-flow: column nowrap;
            gap: 12px;
            justify-content: space-between;
            width: 100%;

            .content-item-btn {
              display: flex;

              div {
                width: 50%;
              }
            }

            .content-item-left {
              display: flex;
              gap: 16px;

              .color-done {
                color: $colorDone;
              }

              .color-total {
                color: $colorTotal;
              }

              .content-icon {
                width: 44px;
                height: 44px;
              }

              .data-text {
                font-size: 24px;
                font-weight: 600;
                line-height: 1;
                white-space: nowrap;
              }

              .content-box {
                display: flex;
                flex-direction: column;
                gap: 12px;

                .content-box-label {
                  // font-weight: 600;
                  line-height: 1;
                  color: #555;
                  white-space: nowrap;
                }

                .content-box-data {
                  display: flex;
                  align-items: center;
                }
              }
            }
          }
        }

        .energy-desk-content-table {
          flex: 1;
          padding-left: 16px;
        }

        .energy-desk-content-list {
          display: flex;
          flex-flow: column nowrap;
          gap: 50px;
          align-items: center;
          width: 40%;

          .content-item {
            display: flex;
            gap: 50px;
            align-items: center;
            justify-content: center;
            width: 100%;
            // width: 30%;

            .content-item-left {
              display: flex;
              gap: 16px;
              width: 50%;

              .color-done {
                color: $colorDone;
              }

              .color-total {
                color: $colorTotal;
              }

              .content-icon {
                width: 44px;
                height: 44px;
              }

              .data-text {
                font-size: 22px;
                font-weight: 600;
                line-height: 1;
                white-space: nowrap;
              }

              .content-box {
                display: flex;
                flex-direction: column;
                gap: 12px;

                .content-box-label {
                  // font-weight: 600;
                  line-height: 1;
                  color: #555;
                  white-space: nowrap;
                }

                .content-box-data {
                  display: flex;
                  align-items: center;
                }
              }
            }
          }
        }
      }
    }

    .echarts-chart-com {
      display: table-cell;
      width: 370px;
      height: calc(100% - v-bind(title_height));
      text-align: center;
      vertical-align: middle;
    }
  }
}

.boxShadow {
  box-shadow: 0 0 10px rgb(0 37 86 / 12%);
}

.borderRidus {
  border-radius: 4px;
}
</style>
